<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <text class="nav-title">更多功能</text>
      <view class="nav-right">
        <view class="dots">
          <view class="dot"></view>
          <view class="dot"></view>
          <view class="dot"></view>
        </view>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 角色切换按钮组 -->
      <view class="role-switch-container">
        <view class="role-title">切换角色</view>
        <view class="role-buttons">
          <view class="role-button" @tap="switchToAdmin">
            <uni-icons type="contact" size="36" color="#007AFF" style="margin-bottom: 10rpx;"/>
            <text class="role-text">管理员</text>
          </view>
          <view class="role-button" @tap="switchToCollege">
            <uni-icons type="office" size="36" color="#007AFF" style="margin-bottom: 10rpx;"/>
            <text class="role-text">学院</text>
          </view>
          <view class="role-button" @tap="switchToCounselor">
            <uni-icons type="person" size="36" color="#007AFF" style="margin-bottom: 10rpx;"/>
            <text class="role-text">辅导员</text>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部导航按钮 -->
    <view class="bottom-nav">
      <view class="nav-item" @tap="navigateTo('/pages/college/duty-status')">
        <uni-icons type="grid" size="24" color="#999"/>
        <text class="nav-text">值班安排</text>
      </view>
      <view class="nav-item active" @tap="navigateTo('/pages/college/more-functions')">
        <uni-icons type="grid" size="24" color="#007AFF"/>
        <text class="nav-text active">更多功能</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    methods: {
      // 导航到指定页面
      navigateTo(url) {
        // 如果点击的是当前页面，则不跳转
        if (getCurrentPages().slice(-1)[0].route !== url.replace('/pages/', '')) {
          uni.navigateTo({
            url: url
          });
        }
      },
      
      // 切换到管理员角色
      switchToAdmin() {
        this.confirmSwitchRole('管理员', '/pages/admin/duty-status');
      },
      
      // 切换到学院角色
      switchToCollege() {
        this.confirmSwitchRole('学院', '/pages/college/duty-status');
      },
      
      // 切换到辅导员角色
      switchToCounselor() {
        this.confirmSwitchRole('辅导员', '/pages/counselor/duty-schedule');
      },
      
      // 确认切换角色
      confirmSwitchRole(roleName, targetUrl) {
        uni.showModal({
          title: '切换角色',
          content: `确定要切换到${roleName}角色吗？`,
          success: (res) => {
            if (res.confirm) {
              // 保存用户角色信息
              uni.setStorageSync('userRole', roleName);
              
              // 跳转到对应角色的页面
              uni.reLaunch({
                url: targetUrl
              });
            }
          }
        });
      }
    }
  }
</script>

<style scoped>
  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
  }
  
  .nav-bar {
    height: 88rpx;
    background-color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
  }
  
  .nav-title {
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
  }
  
  .nav-right {
    display: flex;
    align-items: center;
  }
  
  .dots {
    display: flex;
    align-items: center;
  }
  
  .dot {
    width: 16rpx;
    height: 16rpx;
    background-color: #fff;
    border-radius: 8rpx;
    margin-left: 6rpx;
  }
  
  .content {
    flex: 1;
  }
  
  /* 角色切换容器样式 */
  .role-switch-container {
    background-color: #fff;
    margin: 20rpx;
    border-radius: 16rpx;
    padding: 30rpx;
  }
  
  .role-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
  }
  
  .role-buttons {
    display: flex;
    justify-content: space-between;
  }
  
  .role-button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30rpx 20rpx;
    margin: 0 10rpx;
    background-color: #f8f8f8;
    border-radius: 12rpx;
  }
  
  .role-text {
    font-size: 28rpx;
    color: #333;
  }
  
  /* 底部导航样式 */
  .bottom-nav {
    height: 120rpx;
    display: flex;
    background-color: #fff;
    border-top: 1rpx solid #eee;
  }
  
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .nav-item.active .nav-text {
    color: #007AFF;
  }
  
  .nav-text {
    font-size: 24rpx;
    color: #999;
    margin-top: 8rpx;
  }
</style>